<script setup lang="ts">
import { getOrderSearch, getOrderTable } from '@fl/api/anjutong/order-record'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import {ElTable,ElPagination} from 'element-plus'
import type { selectType } from './type'

import { Ordertable } from './type'

const TimeStr = ref('')
const orderTableObj = reactive(new Ordertable())

// 重置
function reset() {
    orderTableObj.objQuery = {
        /**
     * 订单结束日期
     */
        endTime: '',
        /**
     * 商户名称
     */
        memberId: null,
        merchantName: '',
        /**
     * 手机号
     */
        mobile: '',
        /**
     * 订单渠道
     */
        orderChannel: '',
        /**
     * 订单编号
     */
        orderNo: '',
        /**
     * 订单来源
     */
        orderSource: '',
        /**
     * 订单状态
     */
        orderStatus: '',
        /**
     * 支付渠道
     */
        paymentWay: '',
        /**
     * 订单开始日期
     */
        startTime: '',
    }
    TimeStr.value = ''
    getDataList()
}
// 查询
function onSubmit() {
    console.log(orderTableObj)
    getDataList()
    console.log('查询')
}
// 获取列表
async function getDataList() {
    const param = Object.assign({}, orderTableObj)
    if (TimeStr.value && TimeStr.value.length > 0) {
        param.objQuery.startTime = TimeStr.value[0]
        param.objQuery.endTime = TimeStr.value[1]
    }

    delete param.tableData
    delete param.total
    const res = await getOrderTable(param)
    const data = Object.assign({}, res)
    console.log(data)

    orderTableObj.tableData = data.records
    // orderTableObj.page = data.pages
    // orderTableObj.size = data.size
    orderTableObj.total = data.total
}
getDataList()

const paymentWayList = ref<selectType[]>([]) // 支付渠道
const orderStatusList = ref<selectType[]>([]) // 订单状态
const orderSourceList = ref<selectType[]>([]) // 订单状态
const orderChannelList = ref<selectType[]>([]) // 订单来源
async function getSearchData() {
    const res = await getOrderSearch()
    const selectData = res.data
    paymentWayList.value = objectToArray(selectData.paymentWayList)
    orderStatusList.value = objectToArray(selectData.orderStatusList)
    orderSourceList.value = objectToArray(selectData.orderSourceList)
    orderChannelList.value = objectToArray(selectData.orderChannelList)
}
getSearchData()
console.log(paymentWayList)

function objectToArray(val: any) {
    const data = val.map((item: { [x: string]: any }) => {
        for (const i in item)
            return { label: item[i], value: i }
    })
    return data
}
// 详情
const router = useRouter()
console.log(router)

function toDetail(row: any) {
    router.push({
        path: '/member-center/order/order-table-detail',
        query: {
            orderNo: row.orderNo,
            orderTime: row.orderTime,
            paymentTime: row.paymentTime,
        },
    })
}
function handleSizeChange(val: any) {
    console.log('handleSizeChange', val)
    orderTableObj.size = val
    getDataList()
}
function handleCurrentChange(val: any) {
    console.log('handleCurrentChange', val)
    orderTableObj.page = val
    getDataList()
}
</script>

<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="订单号">
                <el-input v-model="orderTableObj.objQuery.orderNo"
                          placeholder="请输入订单编号"
                          clearable
                />
            </el-form-item>

            <el-form-item label="手机号">
                <el-input v-model="orderTableObj.objQuery.mobile"
                          placeholder="请输入手机号"
                          clearable
                />
            </el-form-item>

            <el-form-item label="订单日期">
                <el-date-picker v-model="TimeStr"
                                type="daterange"
                                range-separator="至"
                                placeholder="Pick a date"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD"
                                :popper-options="{
                                    modifiers: [
                                        {
                                            name: 'flip',
                                            options: {
                                                fallbackPlacements: ['bottom'],
                                                allowedAutoPlacements: ['bottom'],
                                            },
                                        },
                                    ],
                                }"
                />
            </el-form-item>

            <el-form-item label="支付渠道">
                <el-select v-model="orderTableObj.objQuery.paymentWay"
                           placeholder="请输入支付渠道"
                           clearable
                           style="width: 100px"
                >
                    <el-option v-for="item in paymentWayList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="订单状态">
                <el-select v-model="orderTableObj.objQuery.orderStatus"
                           clearable
                           placeholder="请输入"
                           style="width: 100px"
                >
                    <el-option v-for="item in orderStatusList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                    />
                    <el-option label="已退款" value="5"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="商户名称">
                <el-input v-model="orderTableObj.objQuery.merchantName"
                          clearable
                          placeholder="请输入商户名称"
                />
            </el-form-item>

            <el-form-item label="订单来源">
                <el-select v-model="orderTableObj.objQuery.orderSource"
                           clearable
                           placeholder="请输入"
                           style="width: 100px"
                >
                    <el-option v-for="item in orderSourceList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="订单渠道">
                <el-select v-model="orderTableObj.objQuery.orderChannel"
                           clearable
                           placeholder="请输入"
                           style="width: 100px"
                >
                    <el-option v-for="item in orderChannelList"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary"
                           @click="onSubmit"
                >
                    查询
                </el-button>

                <el-button @click="reset">
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <div>
        <el-table :data="orderTableObj.tableData"
                  border
                  style="width: 100%"
                  max-height="500"
        >
            <el-table-column prop="serialNumber"
                             label="序号"
                             width="80"
            />

            <el-table-column prop="orderNo"
                             label="订单号"
                             width="80"
            />

            <el-table-column prop="memberName"
                             label="用户名称"
            />

            <el-table-column prop="memberMobile"
                             label="手机号码"
            />

            <el-table-column prop="merchantName"
                             label="商户名称"
            />

            <el-table-column prop="productName"
                             label="产品名称"
            />

            <el-table-column prop="orderSource"
                             label="订单来源"
            />

            <el-table-column prop="orderChannel"
                             label="订单渠道"
            />

            <el-table-column prop="orderStatus"
                             label="订单状态"
            />

            <el-table-column prop="orderAmount"
                             label="订单金额"
            />

            <el-table-column prop="preferentialConditions"
                             label="优惠条件"
            >
                <template #default="scope">
                    {{ scope.row.preferentialConditions ? scope.row.preferentialConditions : '-' }}
                </template>
            </el-table-column>

            <el-table-column prop="actualAmountPaid"
                             label="实付金额"
            />

            <el-table-column prop="pointsConsumption"
                             label="消耗积分"
            />

            <el-table-column prop="orderTime"
                             label="下单时间"
            />

            <el-table-column prop="paymentTime"
                             label="支付时间"
            />

            <el-table-column prop="paymentWay"
                             label="支付渠道"
            />

            <el-table-column fixed="right"
                             label="操作"
                             width="130"
            >
                <template #default="scope">
                    <el-button type="text"
                               link
                               @click="toDetail(scope.row)"
                    >
                        查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination small
                       background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="orderTableObj.total"
                       class="mt-4"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
        />
    </div>
</template>

<style lang="scss" scoped>

</style>
